import {
  Button,
  Space,
  Table,
  Divider,
  Popconfirm,
  Modal,
  Badge,
  Tag
} from 'antd';
import Column from 'antd/lib/table/Column';
import { useBoolean, useRequest } from 'ahooks';
import { useHistory } from 'react-router-dom';

import { useState } from 'react';
import * as APIS from '../../../../constants/api-constants';
import Questionnaire from './questionnaire';

interface Props {
  requestTemplateList: (currentPage: number) => Promise<void>;
  currentPage: number;
  tableProps: Questionnaire.Template[];
  loading: boolean;
  total: number
}

export default ({
  currentPage, tableProps, loading, total, requestTemplateList
}: Props) => {
  const [currentTemplateUuid, setCurrentTemplateUuid] = useState<string>();
  const [currentTemplateTitle, setCurrentTemplateTitle] = useState<string>();
  const [
    isQuestionnnaireModalShow,
    {
      setFalse: questionnnaireModalHidden,
      setTrue: questionnnaireModalShow
    }
  ] = useBoolean(false);
  const history = useHistory();

  /**
   * 删除模板
   */
  const {
    run: handleDeleteTemplate,
    loading: deleteLoading
  } = useRequest((data) => ({
    url: APIS.TEMPLATE,
    method: 'DELETE',
    data: { uuid: data }
  }), {
    manual: true,
    onSuccess: () => {
      requestTemplateList(1);
    },
    onError: () => {
    }
  });

  return (
    <>
      <Table
        size="middle"
        loading={loading || deleteLoading}
        rowKey={(record) => record.uuid}
        dataSource={tableProps}
        pagination={{
          current: currentPage,
          onChange: (page) => {
            requestTemplateList(page);
          },
          total,
        }}
      >
        <Column title="问卷标题" dataIndex="title" key="title" />
        <Column
          title="二级问卷个数"
          dataIndex="questionnaireLen"
          key="questionnaireLen"
          render={(record: number) => (
            <Tag color="green">{record}</Tag>
          )}
        />
        <Column
          title="是否含有开启的二级问卷"
          dataIndex="hasQuestionnaireOpen"
          key="hasQuestionnaireOpen"
          render={(record: boolean) => (
            record ? (
              <span>
                <Badge status="success" />
                有开启
              </span>
            ) : (
              <span>
                <Badge status="error" />
                全关闭
              </span>
            )
          )}
        />
        <Column
          title="问卷描述"
          dataIndex="description"
          key="description"
          ellipsis
        />
        <Column title="问卷结语" dataIndex="epilog" key="epilog" ellipsis />
        <Column
          width={350}
          title="操作"
          render={(record: Questionnaire.Template) => (
            <Space split={<Divider type="vertical" />}>
              <Button
                type="link"
                size="small"
                onClick={() => {
                  history.push(`/home/templateUpdate/${record.uuid}`);
                }}
              >
                修改
              </Button>
              <Button
                type="link"
                size="small"
                onClick={() => {
                  setCurrentTemplateUuid(record.uuid);
                  setCurrentTemplateTitle(record.title);
                  questionnnaireModalShow();
                }}
              >
                二级管理
              </Button>
              <Popconfirm
                title="删除后该问卷下的回答无法找回！是否删除?"
                onConfirm={() => {
                  handleDeleteTemplate(record.uuid);
                }}
                okText="确定"
                cancelText="取消"
              >
                <Button type="link" size="small">
                  删除
                </Button>
              </Popconfirm>
            </Space>
          )}
        />
      </Table>
      <Modal
        width={800}
        title={`${currentTemplateTitle} 中二级问卷`}
        visible={isQuestionnnaireModalShow}
        onCancel={questionnnaireModalHidden}
        footer={null}
      >
        <Questionnaire currentTemplateUuid={currentTemplateUuid} />
      </Modal>
    </>
  );
};
